<template>
  <div class="client-box">
    <div class="title">前提条件</div>
    <div class="prompt">准备一台计算机，要求安装的容器引擎版本必须为1.11.2及以上</div>
    <div class="title">操作步骤</div>
    <div class="prompt">1、以root用户登录容器引擎所在的虚拟机</div>
    <div class="prompt">2、获取登录访问指令，并复制到节点上执行</div>
    <div class="prompt btn" @click="handleClick">生成登录指令</div>
    <div class="prompt">3、上传镜像</div>
    <div class="image-box">
      <div>sudo docker tag [{镜像名称}:{版本名称}] swr.cn-north-4.myhuaweicloud.com/{组织名称}/{镜像名称}:{版本名称}</div>
      <div>sudo docker push swr.cn-north-4.myhuaweicloud.com/{组织名称}/{镜像名称}:{版本名称}</div>
    </div>
    <!-- 生成指令弹窗 -->
    <pdlog ptop="8%" append-to-body v-model="showTip" width="615px" title="登录指令" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="image-box2">
        <div>docker login -u cn-north-4@08HYI69BRKJXT1KH2QWI -p</div>
        <div>d4054f56ef208d5fe5070f4df00aec10719c6bbca7d3183db94a1c40cff23808 swr.cn-north-4.myhuaweicloud.com</div>
      </div>
      <div class="time-box">过期时间：2024/01/01 03:32:32</div>
      <template #diafooter>
        <el-button @click="showTip=false" size="small" type="primary">确定</el-button>
      </template>
    </pdlog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      showTip:false
    }
  },
  methods:{
    handleClick(){
      console.log('@@@@@@@2')
      this.showTip = true
    }
  }

}
</script>

<style lang="less" scoped>
.client-box{
  margin: 0 15px;
  color: #333333;
  .title{
    font-size: 16px;
  }
  .prompt{
    padding-left: 30px;
    margin: 10px 0;
    
  }
  .btn{
    color: #2EB1FC;
    padding-left:52px;
    cursor: pointer;
  }
  .image-box{
    font-size: 13px;
    margin: 0 30px;
    background-color: #282c34;
    color:#fff;
    padding: 5px 2px;
  }
}
.image-box2{
    font-size: 13px;
    margin: 0 30px;
    background-color: #282c34;
    color:#fff;
    padding: 15px 2px;
  }
  .time-box{
    margin: 30px 30px 0;
  }

</style>